<template>
  <div class="user-info-table">
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column
        v-for="item in title"
        :key="item"
        :prop="item"
        :label="item"
      >
        <template slot-scope="scope">
            <div
                v-if="typeof(scope.row[item]) == 'object'"    
            >
                <div v-for="element in scope.row[item]" :key="element">
                    {{element}}
                </div>
            </div>
            <div
                v-else    
            >
            {{scope.row[item]}}
            </div>     
        </template>     
      </el-table-column>
    </el-table>
    <pagination
      class="pageWrapper"
      v-show="total > pageSize"
      :total="total"
      :layout="'total, prev, pager, next'"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="handlePage"
    />
  </div>
</template>
<script>
import moment from 'moment'
import { getWittenHistoryRecord } from "@/api/work";
export default {
  name: "ReportUserInfoTable",
  props: {
    dataSource: {
      type: Array,
    },
    currentYear:{
        type:Number
    }
  },
  components: {
    Pagination: () => import("@/components/Pagination"),
  },
  watch: {
    dataSource: {
      handler(data = []) {
        this.total = data.length;
        this.handlePage();
      },
      immediate: true,
    },
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      list: [],
      title: [],
      loading:false,
    };
  },
  mounted() {
    this.fetchData({ page: 1,year:parseInt(moment(new Date()).format('YYYY')) });
  },
  methods: {  
    fetchData(param) {
      this.loading = true
      getWittenHistoryRecord(param).then((res) => {
        this.list = res.data.results;
        this.title = Object.keys(res.data.results[0]);
        this.total = res.data.count
        this.currentPage = 1
        this.loading = false
      });
    },
    // 选择用户分页
    handlePage() {
        this.loading = true
      getWittenHistoryRecord({page:this.currentPage,year:this.currentYear}).then(res =>{
        this.list = res.data.results;
        this.title = Object.keys(res.data.results[0]);
        this.total = res.data.count
        this.loading = false
      })
    },
  },
};
</script>
<style lang="scss">
.weekly-report-statisc-dialog {
  .el-dialog__body {
    padding-top: 0;
  }
}
</style>